<template>
  <div>
    <div class="i-layout-page-header">
          <span class="ivu-page-header-title mr20">PC商城</span>
          <div class="hbut">
            <div style="float: right;display:flex;justify-content:center">
                <el-button type="primary" @click="saveClick">保存</el-button>
            </div>
          </div>
      </div>
    <div class="divBox">
        <el-card class="box-card">
            <el-tabs tab-position="left" @tab-click="tabClick">
            <el-tab-pane label="网站LOGO" data-index="0">
                <div data-v-56116b83="" style="display: flex; width: 83%;">
                    <div data-v-56116b83="" class="pciframe ivu-col" dis-hover="">
                        <img data-v-56116b83="" src="https://phpadmin.huaye.cn/admin/img/pcbanner.23f05e2e.png" class="pciframe-box">
                        <div data-v-56116b83="" class="logoimg"><img data-v-56116b83="" :src="logoImg"></div>
                    </div>
                    <div data-v-56116b83="" class="ivu-col">
                        <div data-v-56116b83="" class="content">
                            <div data-v-56116b83="" class="right-box">
                                <div data-v-56116b83="" class="hot_imgs">
                                    <div data-v-56116b83="" class="title">页面设置</div>
                                    <div data-v-56116b83="" class="title-text">建议尺寸：90 * 108px</div>
                                    <div data-v-56116b83="" class="title-text">除LOGO图标外，页面其他内容仅供参考</div>
                                    <div data-v-56116b83="" class="list-box" style="margin-top:20px">
                                        <span>更换图片:</span>
                                        <div class="upLoadPicBox" @click="modalPicTap('1', 'duo', index, true,'logo',2)">
                                          <div v-if="logoImg" class="pictrue"><img :src="logoImg"></div>
                                          <div v-else class="upLoad">
                                            <i class="el-icon-camera cameraIconfont" />
                                          </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="首页轮播图" data-index="1">
              <div data-v-56116b83="" style="display: flex; width: 83%;">
                <div data-v-56116b83="" class="pciframe ivu-col" style="" dis-hover="">
                  <img data-v-56116b83="" src="https://phpadmin.huaye.cn/admin/img/pcbanner.23f05e2e.png" class="pciframe-box">
                  <div data-v-56116b83="" class="pcmoddile_goods" style="">
                    <el-carousel indicator-position="none" arrow="never" height="160px" :interval="2000">
                      <el-carousel-item v-for="(item,index) in menuList" :key="index">
                        <div class="carousel_item">
                          <img :src="item.pic" >
                        </div>
                      </el-carousel-item>
                    </el-carousel>
                  </div>
                </div>
                <div data-v-56116b83="" class="ivu-col" style="">
                  <div data-v-56116b83="" class="content" style="">
                    <div data-v-56116b83="" class="right-box">
                      <div data-v-56116b83="" class="hot_imgs">
                        <div data-v-56116b83="" class="title">轮播图设置</div>
                        <div data-v-56116b83="" class="title-text">建议尺寸：800 * 480px，拖拽图片可调整图片顺序哦，最多添加五张。</div>
                        <div data-v-56116b83="" class="title-text">除轮播图外，页面其他内容仅供参考</div>
                        <div class="mobile-config">
                          <div v-for="(item, index) in menuList" :key="index" class="item">
                            <div
                              class="move-icon"
                              draggable="true"
                              @dragstart="handleDragStart($event, item)"
                              @dragover.prevent="handleDragOver($event, item)"
                              @dragenter="handleDragEnter($event, item,0)"
                              @dragend="handleDragEnd($event, item)"
                            >
                              <span class="iconfont icondrag2"></span>
                            </div>
                            <div class="picBox">
                              <div class="img-box" @click="modalPicTap('1', 'duo', index, true,'lunbo')" >
                                <img :src="item.pic" alt="" v-if="item.pic" />
                                <div v-else class="upLoad">
                                  <i class="el-icon-camera cameraIconfont" />
                                </div>
                              </div>
                            </div>
                            <div v-if="index > 0" class="delect-btn" @click.stop="bindDelete(item, index,1)" >
                              <i class="el-icon-circle-close"></i>
                            </div>
                            <div class="info">
                              <div>
                                <span>标题</span>
                                <div class="input-box">
                                  <el-input v-model="item.title" :placeholder="'请填写' + item.title" />
                                </div>
                              </div>
                              <div class="info-item">
                                <span>链接</span>
                                <div class="input-box">
                                  <el-input v-model="item.url" placeholder="请填写链接" />
                                </div>
                              </div>
                              <div class="info-item">
                                <span>状态</span>
                                <div class="input-box">
                                  <el-switch v-model="item.status" :active-value="true" :inactive-value="false" active-text="显示" inactive-text="隐藏" />
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="add-btn mb20 mt20">
                            <el-button ghost style="width: 100%;height: 40px;border-color: #1890ff;color: #1890ff;" @click="addBox" >添加数据
                            </el-button>
                          </div>
                          <!-- <div style="text-align: center">
                            <el-button type="primary" style="width: 100%; margin: 0 auto; height: 40px" @click="saveConfig">保存</el-button>
                          </div> -->
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="首页宣传图片" data-index="2">
              <div data-v-56116b83="" style="display: flex; width: 83%;">
                <div data-v-56116b83="" class="pciframe ivu-col" style="" dis-hover="">
                  <img data-v-56116b83="" src="https://phpadmin.huaye.cn/admin/img/pcbanner.23f05e2e.png" class="pciframe-box">
                  <div data-v-56116b83="" class="pcmoddile_goods1" style="">
                    <div class="block" v-for="(item,index) in menuList1" :key="index">
                      <el-image style="width: 80px; height: 80px" :src="item.pic" :fit="fit"></el-image>
                    </div>
                  </div>
                </div>
                <div data-v-56116b83="" class="ivu-col" style="">
                  <div data-v-56116b83="" class="content" style="">
                    <div data-v-56116b83="" class="right-box">
                      <div data-v-56116b83="" class="hot_imgs">
                        <div data-v-56116b83="" class="title">宣传图设置</div>
                        <div data-v-56116b83="" class="title-text">建议尺寸：240 * 160px，拖拽图片可调整图片顺序哦，最多添加四张。</div>
                        <div data-v-56116b83="" class="title-text">除宣传图外，页面其他内容仅供参考</div>
                        <div class="mobile-config">
                          <div v-for="(item, index) in menuList1" :key="index" class="item">
                            <div
                              class="move-icon"
                              draggable="true"
                              @dragstart="handleDragStart($event, item)"
                              @dragover.prevent="handleDragOver($event, item)"
                              @dragenter="handleDragEnter($event, item,1)"
                              @dragend="handleDragEnd($event, item)"
                            >
                              <span class="iconfont icondrag2"></span>
                            </div>
                            <div class="picBox">
                              <div class="img-box" @click="modalPicTap('1', 'duo', index, true,'xuanchuan')" >
                                <img :src="item.pic" alt="" v-if="item.pic" />
                                <div v-else class="upLoad">
                                  <i class="el-icon-camera cameraIconfont" />
                                </div>
                              </div>
                            </div>
                            <div v-if="index > 0" class="delect-btn" @click.stop="bindDelete(item, index,2)" >
                              <i class="el-icon-circle-close"></i>
                            </div>
                            <div class="info">
                              <div>
                                <span>标题</span>
                                <div class="input-box">
                                  <el-input v-model="item.title" :placeholder="'请填写' + item.title" />
                                </div>
                              </div>
                              <div class="info-item">
                                <span>链接</span>
                                <div class="input-box">
                                  <el-input v-model="item.url" placeholder="请填写链接" />
                                </div>
                              </div>
                              <div class="info-item">
                                <span>状态</span>
                                <div class="input-box">
                                  <el-switch v-model="item.status" :active-value="true" :inactive-value="false" active-text="显示" inactive-text="隐藏" />
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="add-btn mb20 mt20">
                            <el-button ghost style="width: 100%;height: 40px;border-color: #1890ff;color: #1890ff;" @click="addBox1" >添加数据
                            </el-button>
                          </div>
                          <!-- <div style="text-align: center">
                            <el-button type="primary" style="width: 100%; margin: 0 auto; height: 40px" @click="saveConfig">保存</el-button>
                          </div> -->
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="客服页面广告" data-index="3">
              <div data-v-56116b83="" style="display: flex; width: 83%;">
                <div data-v-56116b83="" class="pciframe ivu-col" dis-hover="">
                  <img data-v-56116b83="" src="https://phpadmin.huaye.cn/admin/img/kefu.6c63578f.png" class="pciframe-box">
                  <div data-v-56116b83="" class="box3_sile">
                    <div data-v-56116b83="" class="" v-html="contentList[0].content">{{contentList[0].content}}</div>
                  </div>
                </div>
                <div data-v-56116b83="" class="ivu-col ivu-col-span-xs-24 ivu-col-span-sm-24 ivu-col-span-md-12 ivu-col-span-lg-14" style="margin-left: 40px;">
                  <div data-v-56116b83="" class="table_box" style="">
                    <div data-v-56116b83="" class="ivu-row-flex">
                      <div data-v-56116b83="" class="ivu-col ivu-col-span-xs-24 ivu-col-span-sm-24 ivu-col-span-md-12 ivu-col-span-lg-7 ivu-col-span-xl-7">
                        <div data-v-56116b83="" class="title">隐私权限页面展示：</div>
                      </div>
                      <div>
                        <ueditor-from v-model="contentList[0].content" :content="contentList[0].content" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
  </div>
</template>

<script>
import { configSaveUniq,configGetUniq } from '@/api/systemConfig'
import { goodDesignList,SaveDataApi } from '@/api/systemGroup'
import { themeSave,getTheme} from '@/api/systemGroup'

export default {
  name: 'pcViewDesign',
  data(){
    return {
      active:0,
      logoImg:'',
      tabIndex:'0',
      carouselImgs:[],      
    //首页轮播图片
      menuList: [],      
    //首页宣传图片
      menuList1: [],
      content:'',
      contentList:[]
    }
  },
  mounted(){
    // this.getLogo();
    this.getMenuList();
    this.getMenuList1();
    this.getAdvertising();
  },
  methods:{
    saveAdvertising(param,url){
      let tArr = this.contentList.filter((item, index,arr)=>{ return item.status == true});
      SaveDataApi({ [param]: this.changeIndex(this.contentList),type:1}, url).then(
        (res) => {
          this.$message.success("保存成功");
          this.getAdvertising();
        }
      );
    },
    getAdvertising(){
      goodDesignList({gid:93}).then((response)=>{
        let list = response.list;
        let arr = [];
        let arr1 = [];
        list.forEach((item)=>{
          let obj = {};
          obj.value = JSON.parse(item.value);
          obj.id = item.id;
          obj.gid = item.gid;
          obj.status = item.status;
          obj.storeId=item.storeId;
          arr.push(obj);
        })
        arr.forEach((item1)=>{
          let obj1 = {};
          obj1.content = item1.value.fields[0].value;
          obj1.id = item1.id;
          obj1.gid = item1.gid;
          // obj1.show = '1';
          obj1.status = item1.status;
          obj1.storeId=item1.storeId;
          arr1.push(obj1);
        })
        this.contentList = arr1;
        // this.content=arr1[0].content;
        // console.log(arr1);
        // let indexTab = arr1.filter((item, index,arr)=>{ return item.status == true});
        // console.log(indexTab);
        // this.indexTab = indexTab;
        //
      })
    },
    //保存轮播图
    saveData(param, url) {
      let tArr = this.menuList.filter((item, index,arr)=>{ return item.status == true});
      SaveDataApi({ [param]: this.changeIndex(this.menuList),type:1}, url).then(
        (res) => {
          this.$message.success("保存成功");
          this.getMenuList();
        }
      );
    },
    //保存宣传图
    saveData1(param, url) {
      let tArr = this.menuList.filter((item, index,arr)=>{ return item.status == true});
      SaveDataApi({ [param]: this.changeIndex(this.menuList1),type:1}, url).then(
        (res) => {
          this.$message.success("保存成功");
          this.getMenuList1();
        }
      );
    },
    changeIndex(array) {
      array.map((item, index) => {
        item.sort = index;
      });
      return array;
    },
    addBox() {
      if (this.menuList.length >= 4) {
        this.$message.warning("设置数据不能超过4条");
      }else {
        const indexMenu = JSON.parse(JSON.stringify(this.menuList[0]));
        indexMenu.id = null;
        indexMenu.title = "";
        indexMenu.url = "";
        indexMenu.pic = "";
        this.menuList.push(indexMenu);
      }
    },
    addBox1() {
      if (this.menuList1.length >= 4) {
        this.$message.warning("设置数据不能超过4条");
      }else {
        const indexMenu = JSON.parse(JSON.stringify(this.menuList1[0]));
        indexMenu.id = null;
        indexMenu.title = "";
        indexMenu.url = "";
        indexMenu.pic = "";
        this.menuList1.push(indexMenu);
      }
    },
    // 删除
    bindDelete(item, index,i) {
      i==1?this.menuList.splice(index, 1):this.menuList1.splice(index, 1);
    },
    // 点击商品图
    modalPicTap(tit, num, i, boolean,type) {
      //console.log(tit)
      //console.log(num)
      //console.log(i)
      const _this = this;
      this.$modalUpload(
        function (img) {
          if (type=='lunbo') {
            _this.menuList[i].pic = img[0].sattDir;
          }else if(type=='xuanchuan'){
            _this.menuList1[i].pic = img[0].sattDir;
          }else if(type=='logo'){
            _this.logoImg=img[0].sattDir;
          }
        },
        tit,
        "content",
        true
      );
    },
    // 移动
    handleDragStart(e, item) {
      this.dragging = item;
    },
    handleDragEnd(e, item) {
      this.dragging = null;
    },
    handleDragOver(e) {
      e.dataTransfer.dropEffect = "move";
    },
    handleDragEnter(e, item,i) {
      e.dataTransfer.effectAllowed = "move";
      if (item === this.dragging) {
        return;
      }
      if(i==0){
        const newItems = [...this.menuList];
        const src = newItems.indexOf(this.dragging);
        const dst = newItems.indexOf(item);
        newItems.splice(dst, 0, ...newItems.splice(src, 1));
        this.menuList = newItems;
      }else{
        const newItems = [...this.menuList1];
        const src = newItems.indexOf(this.dragging);
        const dst = newItems.indexOf(item);
        newItems.splice(dst, 0, ...newItems.splice(src, 1));
        this.menuList1 = newItems;
      }
    },
    //首页轮播图
    getMenuList(){
      goodDesignList({gid:92}).then((response)=>{
        let list = response.list;
        let arr = [];
        let arr1 = [];
        list.forEach((item)=>{
          let obj = {};
          obj.value = JSON.parse(item.value);
          obj.id = item.id;
          obj.gid = item.gid;
          obj.status = item.status;
          obj.storeId=item.storeId;
          arr.push(obj);
        })
        arr.forEach((item1)=>{
          let obj1 = {};
          obj1.pic = item1.value.fields[0].value;
          obj1.title = item1.value.fields[1].value;
          obj1.url = item1.value.fields[2].value;
          obj1.id = item1.id;
          obj1.gid = item1.gid;
          // obj1.show = '1';
          obj1.status = item1.status;
          obj1.storeId=item1.storeId;
          arr1.push(obj1);
        })
        this.menuList = arr1;
        // console.log(arr1);
        // let indexTab = arr1.filter((item, index,arr)=>{ return item.status == true});
        // console.log(indexTab);
        // this.indexTab = indexTab;
        //
      })
    },
    //首页宣传图片
    getMenuList1(){
      goodDesignList({gid:94}).then((response)=>{
        let list = response.list;
        let arr = [];
        let arr1 = [];
        list.forEach((item)=>{
          let obj = {};
          obj.value = JSON.parse(item.value);
          obj.id = item.id;
          obj.gid = item.gid;
          obj.status = item.status;
          obj.storeId=item.storeId;
          arr.push(obj);
        })
        arr.forEach((item1)=>{
          let obj1 = {};
          obj1.pic = item1.value.fields[0].value;
          obj1.title = item1.value.fields[1].value;
          obj1.url = item1.value.fields[2].value;
          obj1.id = item1.id;
          obj1.gid = item1.gid;
          // obj1.show = '1';
          obj1.status = item1.status;
          obj1.storeId=item1.storeId;
          arr1.push(obj1);
        })
        this.menuList1 = arr1;
        // console.log(arr1);
        // let indexTab = arr1.filter((item, index,arr)=>{ return item.status == true});
        // console.log(indexTab);
        // this.indexTab = indexTab;
        //
      })
    },
    saveClick(){
      if(this.tabIndex=='0'){
        this.saveLogo();
      }else if(this.tabIndex=='1'){
        this.saveData("pcIndexBanner", "/admin/page/layout/index/pcBanner/save")
      }else if(this.tabIndex=='2'){
        this.saveData1("pcPublicityBanner", "/admin/page/layout/index/publicity/save")
      }else if(this.tabIndex=='3'){
        this.saveAdvertising("pcAdvertising", "/admin/page/layout/index/pcAdvertising/save")
      }
    },
    tabClick(obj){
      //console.log(obj)
      this.tabIndex=obj._data.index;
    },
    saveLogo(){
      var logoSave={ key:'pc_main_logo',value:this.logoImg}
      configSaveUniq(logoSave).then(res=>{
        this.$message.success('保存成功')
      })
    },
    getLogo(){
      var data={ key:'pc_main_logo' }
      // configGetUniq(data).then(res=>{
      //   //console.log(res);
      //   this.logoImg=res;
      // })
    },
    // modalPicTap () {
    //   const _this = this;
    //   this.$modalUpload(function(img) {
    //     console.log(img);
    //     _this.logoImg=img[0].sattDir;
    //   })
    // }
  }
}
</script>

<style lscoped lang="scss">
  .flex{
    display: flex;
  }
  .align-center{
    align-items: center;
  }
  .i-layout-page-header{
    display: flex;
    height: 66px;
    background-color: white;
    border-bottom: 1px solid #e8eaec;
  }
  .ivu-page-header-title{
    display: inline-block;
    color: #17233d;
    font-weight: 500;
    font-size: 20px;
    padding-bottom: 16px;
    margin-left: 20px;
    margin-top: 20px;
  }
  .hbut{
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-right: 20px;
    margin-left: auto;
  }
  .el-tabs__item.is-active {
    color: #1890ff;
    background-color: #f0faff;
  }
  .el-tabs__item {
    line-height: 50px;
    width: 150px;
    height: 50px;      
  }
  .el-tabs--left .el-tabs__item.is-left {
    text-align: left;
  }
  .pciframe .pciframe-box[data-v-56116b83], .pciframe img[data-v-56116b83]{
    width: 430px;
    height: 280px;
    border-radius: 10px;
  }
  .logoimg[data-v-56116b83] {
    position: absolute;
    top: 19px;
    left: 4px;
    width: 60px;
    height: 25px;
    border-radius: 0;
  }
  .logoimg img[data-v-56116b83] {
      width: 100%;
      height: 100%;
      border-radius: 0!important;
  }
  .ivu-col {
    position: relative;
    display: block;
}
.content[data-v-56116b83] {
    max-width: 730px;
}
.content .right-box[data-v-56116b83] {
    margin-left: 40px;
}
.hot_imgs[data-v-56116b83] {
    margin-bottom: 20px;
}
.hot_imgs .title[data-v-56116b83] {
    font-size: 14px;
}
.title[data-v-56116b83] {
    border-left: 2px solid #1890ff;
    padding-left: 10px;
    font-weight: 700;
    margin-bottom: 10px;
}
.title-text[data-v-56116b83] {
    padding: 0 0 0 16px;
    color: #999;
    font-size: 12px;
    margin-top: 10px;
}
.pciframe .pcmoddile_goods[data-v-56116b83] {
    position: absolute;
    top: 49px;
    width: 429px;
    height: 160px;
    left: 0;
    background-color: #fff;
}
.pciframe .pcmoddile_goods1[data-v-56116b83] {
    position: absolute;
    display:flex; justify-content:space-between;
    top: 210px;
    width: 429px;
    height: 80px;
    left: 0;
    background-color: #fff;
}
.carousel_item img{
  width: 429px;
  height: 160px;
}
.mobile-config {
  padding: 0 15px 20px 0px;
  .item {
    position: relative;
    display: flex;
    margin-top: 20px;
  }
  .picBox {
    cursor: pointer;
    position: relative;
  }
  .delect-btn {
    position: absolute;
    right: -12px;
    top: -16px;
    color: #999999;
    z-index: 11;
    .el-icon-circle-close {
      font-size: 21px;
      color: #999;
      cursor: pointer;
    }
  }
  .img-box {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .info {
    flex: 1;
    margin-left: 12px;
    .info-item {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }
    span {
      width: 40px;
      font-size: 13px;
    }
    .input-box {
      flex: 1;
    }
  }
}
.pciframe .box3_sile[data-v-56116b83] {
    position: absolute;
    top: 34px;
    right: 85px;
    width: 92px;
    height: 201px;
    background-color: #fff;
}
.box3_sile {
    width: 92px;
    height: auto;
    overflow: auto;
}
.box3_sile img {
    width: 92px;
}
</style>
